<template>

  <el-drawer
    :visible.sync="visible"
    :title="title"
    :modal-append-to-body="true"
    :append-to-body="true"
    :destroy-on-close="false"
    :modal="true"
    direction="rtl"
    :wrapperClosable="false"
    custom-class="form-drawer"
    size="450px"
    @closed="closed"
    >
      <div class="form-drawer__content">
        <el-form ref="formData" :model="formData" :rules="rules" style="padding: 20px;" >
          <el-form-item label-width="80px" label="场景ID" prop="sceneId">
            <el-input v-model="formData.sceneId" placeholder="场景ID" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label-width="80px" label="项目名称" prop="name">
            <el-input v-model="formData.name" placeholder="项目名称" autocomplete="off"  />
          </el-form-item>
          <el-form-item label-width="80px" label="项目封面" prop="imageUrl">
            <el-image
              style="width: 200px; height: 150px"
              :src="imageUrl"
              fit="fit"></el-image>
          </el-form-item>


          <el-form-item label-width="80px" label="所属单位" prop="orgId">
            <el-select
              style="width: 100%;"
              v-model="formData.orgId"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              :remote-method="remoteMethod"
              :loading="loading">
              <el-option
                v-for="item in options"
                :key="item.orgId"
                :label="item.orgName"
                :value="item.orgId">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label-width="80px" label="限制路数" prop="name">
            <el-input-number v-model="formData.limit" :min="1" :max="10" label="限制路数" style="width: 100%;"></el-input-number>
          </el-form-item>

        </el-form>
        <div style="text-align: right;" class="form-drawer__footer">
          <el-button @click="closed" :loading="loading">取 消</el-button>
          <el-button type="primary" :loading="loading" @click="submitForm">确 定</el-button>
        </div>
      </div>
    </el-drawer>
</template>

<script>

  import {
    publishScene,
  } from '@/api/biz/scene'

  import {
    getOrgOptions
  } from '@/api/biz/scene'

  import {
    isOk
  } from '@/utils/request'

  export default {
    name: 'PublishDrawer',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.formData.id = ''
            this.formData.name = value.data.name || ''
            this.formData.sceneId = value.data.id || ''
            this.formData.orgId = value.data.orgId || ''
            this.formData.limit = value.data.limit || 0
            if(value.data.id){
              this.imageUrl=process.env.VUE_APP_BASE_API+'/biz/scene/thumbnail/'+value.data.id
            }
          } else {
            this.formData.id =''
            this.formData.name = ''
            this.formData.sceneId = ''
            this.formData.orgId = ''
            this.formData.limit = 0
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'场景发布',
        loading:false,
        formData: {
          id: '',
          sceneId: '',
          orgId:'',
          name: '',
          limit:0,
        },
        tableData: [],
        queryForm: {
          keywords: undefined,
        },
        page: {
          cur: 1,
          limit: 50,
          total: 0
        },
        updateTime:null,
        imageUrl: '',
        options:[],
        rules: {
          name: [{
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 50,
            message: '长度在 2 到 50 个字符',
            trigger: 'blur'
          }
          ],
          orgId: [{
            required: true,
            message: '请选择所属单位',
            trigger: 'blur'
          }
          ],
          limit: [{
            required: true,
            message: '请输入限制路数',
            trigger: 'blur'
          }
          ],
        }
      }
    },
    created() {
    },
    methods:{
      remoteMethod(query){
        this.loading=true
        getOrgOptions({
          keywords: query,
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result
            this.options=_data;
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      submitForm: function() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true
            publishScene(this.formData).then(rsp => {
              if(200==rsp.code){
                this.$message({
                  type: 'success',
                  message:rsp.message
                })
              }
              this.closed()
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>

<style lang="scss">

  .el-dialog__header {
      border-bottom: 1px solid #aaaaaa;
  }

  .el-dialog__body {
      padding: 0px 0px;
  }

  .el-dialog__footer {
      padding: 10px;
      padding-top: 10px;
      border-top: 1px solid #aaaaaa;
  }

  .division{
    padding: 10px;
    border-top: 1px solid #aaaaaa;
    margin-top: -36px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 120px;
    height: 120px;
    display: block;
  }
</style>
